<template>
  <section class="m-istyle">
    <dl @mouseover="over">
      <dt>推荐民宿</dt>
      <dd
        :class="{active:curKind==='shanghai'}"
        kind="shanghai"
      >
        上海
      </dd>
      <dd
        :class="{active:curKind==='nanjing'}"
        kind="nanjing"
      >
        南京
      </dd>
      <dd
        :class="{active:curKind==='suzhou'}"
        kind="suzhou"
      >
        苏州
      </dd>
    </dl>
    <ul class="ibody">
      <li
        v-for="(item,index) in cur.products"
        :key="index"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="never"
        >
          <img
              :src=item.img
              class="product-img"
          >
          <img src="https://p0.meituan.net/mmc/35ad1f9253761ea6ff822b5e659f234f3758.png" class="head-img"/>
          <div class="info">
            <p class="title">
              {{ item.title }}
            </p>
            <p class="subtitle">
              <span>{{ item.subtitle }}</span>
            </p>
            <p class="price">
              ￥{{ item.price }}
            </p>
          </div>
        </el-card>
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data: () => {
    return {
      curKind: 'shanghai',
      list: [
        {
          type: 'shanghai',
          products: [{
            img: 'https://img.meituan.net/iphoenix/94f6d4dc25b3005cb222d1371c8c90c44341325.jpg@740w_416h_1e_1c',
            title: '斑马斑马，又在做梦啦～外滩|钟声回荡|浴缸里看东方明珠|超酷时尚两居|爆改房',
            subtitle: '整套2居室·可住5人 | 人民广场/外滩',
            price: 457
          },{
            img: 'https://img.meituan.net/phoenix/1951155320014488a436d1891a7c176f280047.jpg@740w_416h_1e_1c',
            title: '虹桥机场21stars ins风打卡店①',
            subtitle: '整套16居室·可住1人 | 虹桥枢纽',
            price: 99
          },{
            img: 'https://img.meituan.net/phoenix/7d6dd5d76235ba523c1b21c9b18aab281062716.jpg@740w_416h_1e_1c',
            title: '【TKS】新天地商圈新式弄堂里轻奢高端独栋公寓，新科技民宿带你领略酷炫体验，毗邻10号线新天地站，步行2分钟',
            subtitle: '整套1居室·可住6人 | 新天地/田子坊',
            price: 498
          },{
            img: 'https://img.meituan.net/phoenix/d8acbd2d9eec8c0a4cb551d6c75ad9ef970125.jpg@740w_416h_1e_1c',
            title: '菜果民宿/整套/大床房/投影/百联/5号地铁新城站,支持节日纪念日鲜花预订和房间布置哦，浪漫旅行起航',
            subtitle: '整套1居室·可住2人 | 奉贤开发区',
            price: 260
          }, {
            img: 'http://p1.meituan.net/iphoenix/4145fba79f0183cb352de33243100ce43147856.jpg@740w_416h_1e_1c',
            title: '木言兮（三期）-微雨·【迪士尼度假区】免费提供迪士尼乐园一次接或送和一次双人早餐',
            subtitle: '整套1居室·可住2人 | 迪士尼度假区',
            price: 610
          }, {
            img: 'https://img.meituan.net/phoenix/d918c870cd42eae438ec169067cadf244080048.jpg@740w_416h_1e_1c',
            title: '陆家嘴商圈 眺望东方明珠 宜家轻奢风格 近6号线浦电路',
            subtitle: '整套1居室·可住2人 | 浦东陆家嘴',
            price: 228
          }]
        },
        {
          type: 'nanjing',
          products: [{
            img: 'https://img.meituan.net/phoenix/77988d306d3977d3c700af8806d10d892474563.jpg@740w_416h_1e_1c',
            title: '【夜奔南京】新街口/夫子庙/张府园地铁站/超级夜景100寸影院大床房/可做饭/乳胶床垫睡上去就不想起来',
            subtitle: '整套1居室·可住2人 | 新街口',
            price: 248
          },{
            img: 'http://p0.meituan.net/iphoenix/4f6d9aa31f03dc2b7aa3828bc7e5ed5f3008803.jpg@740w_416h_1e_1c',
            title: '【夜奔南京】新街口/夫子庙/张府园地铁站/超级夜景100寸影院大床房/可做饭/乳胶床垫睡上去就不想起来',
            subtitle: '整套1居室·可住2人 | 夫子庙/水游城',
            price: 228
          },{
            img: 'https://img.meituan.net/phoenix/3cb3aaf7e123d70abe2d614fcb52a1ba337950.jpg@740w_416h_1e_1c',
            title: '【今晚星闪闪，爱你心满满】绿野仙踪大床房 地铁口小清新公寓，智能马桶 适合学生情侣入住',
            subtitle: '整套1居室·可住2人 | 顾家欧亚达',
            price: 258
          },{
            img: 'https://img.meituan.net/phoenix/bda13859293dcf0e3b96a4baa061b68a370172.jpg@740w_416h_1e_1c',
            title: '（小清欣）地铁口，工业大学，近奥体中心，南京大屠杀，新街口，夫子庙北欧舒适两房',
            subtitle: '整套1居室·可住2人 | 奉贤开发区',
            price: 208
          }, {
            img: 'http://p0.meituan.net/iphoenix/bf26db72c0815abd5eb22d7eadd2d6693596228.jpg@740w_416h_1e_1c',
            title: '【十七筑】夫子庙/新街口/肆/巨幕/茶室/日式和服拍照',
            subtitle: '整套1居室·可住2人 | 夫子庙/水游城',
            price: 448
          }, {
            img: 'https://img.meituan.net/phoenix/503146291bef56e5759c9acb57c2e8a3163695.jpg@740w_416h_1e_1c',
            title: '虹悦城爱.丽舍公寓温馨大床夫子庙旁地铁直达新街口南京南站奥体中心',
            subtitle: '整套1居室·可住2人 | 虹悦城',
            price: 268
          }]
        },
        {
          type: 'suzhou',
          products: [{
            img: 'https://img.meituan.net/phoenix/462596fdfbc0fa36dac7e6c90bf98397176986.jpg@740w_416h_1e_1c',
            title: '苏州站/山塘街/拙政园/虎丘/万达广场',
            subtitle: '整套2居室·可住5人 | 人民广场/外滩',
            price: 300
          },{
            img: 'http://p0.meituan.net/iphoenix/89f34dc9a990ba145a0065c2732f98cf92585.jpg@740w_416h_1e_1c',
            title: '【城宿/碧落】复式LOFT/私人影院',
            subtitle: '整套2居室·可住4人 | ',
            price: 348
          },{
            img: 'https://img.meituan.net/iphoenix/deb15412c2702aa2487256ce95a5d956185740.jpg@740w_416h_1e_1c',
            title: '经济实惠的普通民宿。',
            subtitle: '整套3居室·可住2人 | 湖东邻里中心',
            price: 68
          },{
            img: 'http://p0.meituan.net/iphoenix/1bccef5a922378d4ca8b3166f538d614525950.jpg@740w_416h_1e_1c',
            title: '【路客】暑期大放价|『桃花醉』苏式小院|毗邻山塘|近苏州站|桃花坞｜平江路｜山塘街｜苏州博物馆|拙政园『2居』',
            subtitle: '整套2居室·可住4人 | 桃花坞',
            price: 515
          }, {
            img: 'https://img.meituan.net/phoenix/1dd0c1ee6b44996346981ed8cc40db8b2944698.jpg@740w_416h_1e_1c',
            title: '乐嗨.无舍 地铁口投影仪豪华双大床，近火车站，平江路，观前街，山塘街，博物馆，拙政园，万达广场，可短租，月租。',
            subtitle: '整套2居室·可住4人 | 万达广场',
            price: 258
          }, {
            img: 'http://p0.meituan.net/iphoenix/09c79b17eb78f0549d14b32fc3b3f8ef128888.jpg@740w_416h_1e_1c',
            title: '【烟雨】落地窗公寓，近苏州站+万达+2号线地铁+拙政园+观前街+高层景观投影房',
            subtitle: '整套1居室·可住2人 | 万达广场',
            price: 209
          }]
        }
      ]
    }
  },
  computed: {
    cur () {
      return this.list.filter(item=>item.type===this.curKind)[0]
    }
  },
  methods: {
    async over (e) {
      const dom = e.target
      const tag = dom.tagName.toLowerCase()
      if (tag === 'dd') {
        this.curKind = dom.getAttribute('kind')
      }
    }
  }

}
</script>
<style lang="scss">
  @import "assets/css/index/hotel.scss";
</style>
